<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Base App</title>
    <script src="sdk.js"></script>
    <script src="https://unpkg.com/vconsole@latest/dist/vconsole.min.js"></script>
    <style>
      body {
        --bg-color: #fff;
        --border-color: #e5e6eb;
      }
      body.dark {
        --bg-color: #17171a;
        --border-color: #333335;
      }
      * {
        margin: 0;
        padding: 0;
      }
      html,
      body {
        height: 100%;
      }
      .container {
        width: 100%;
        background-color: var(--bg-color);
        height: 100%;
      }
      ul {
        margin: 0 auto;
        width: calc(100% - 20px);
      }
      ul li {
        width: 100%;
        list-style-type: none;
        margin-bottom: 16px;
      }
      .w-full {
        width: 100%;
      }
      .flex {
        display: flex;
      }
      .flex-1 {
        flex: 1;
      }
      .mx-4 {
        margin-left: 8px;
        margin-right: 8px;
      }
      .ml-4 {
        margin-left: 8px;
      }
      .bg-blue {
        _background-color: #3490de;
        background-image: linear-gradient(to right, #3490de, #3282b8);
      }
      .bg-red {
        _background-color: #e23e57;
        background-image: linear-gradient(to right, #ec008c, #fc6767);
      }
      button {
        height: 48px;
        border-width: 0;
        border-radius: 6px;
        color: white;
        font-size: 16px;
      }

      textarea {
        width: 100%;
        border-width: 0;
        border-radius: 8px;
        font-size: 16px;
        padding: 2px 6px;
        box-sizing: border-box;
        border: 1px solid var(--border-color);
        outline: 1px solid var(--border-color);
        background-color: var(--bg-color);
      }
    </style>
  </head>
  <body>
    <div class="container">
      <ul>
        <li>
          <button
            class="w-full bg-blue"
            onclick="window.BaseApp.showToast({message: 'Hello Flutter'})"
          >
            Show Toast
          </button>
        </li>
        <li>
          <div class="w-full flex">
            <button class="flex-1 bg-blue" id="vibrate">振动</button>
            <button class="flex-1 bg-blue mx-4" id="landscape">横屏</button>
            <button class="flex-1 bg-blue" id="portrait">竖屏</button>
          </div>
        </li>
        <li>
          <div class="w-full flex">
            <button class="flex-1 bg-blue" id="wakeLock-enable">
              屏幕常亮
            </button>
            <button class="flex-1 bg-blue ml-4" id="wakeLock-disable">
              关闭常亮
            </button>
          </div>
        </li>
        <li>
          <div class="w-full flex">
            <button
              class="flex-1 bg-blue"
              onclick="window.BaseApp.getInstalledApps({})"
            >
              App列表
            </button>
            <button
              class="flex-1 bg-blue ml-4"
              onclick="window.BaseApp.getContacts({})"
            >
              联系人列表
            </button>
          </div>
        </li>
        <li>
          <div class="w-full flex">
            <button class="flex-1 bg-blue" id="pickerPicture">选择图片</button>
            <button class="flex-1 bg-blue mx-4" id="videoPicture">
              选择视频
            </button>
            <button class="flex-1 bg-blue" id="filePicker">选择文件</button>
          </div>
        </li>
        <li id="picturePreview"></li>
        <li>
          <div class="w-full flex">
            <button
              class="flex-1 bg-red bg-blue"
              onclick="window.BaseApp.voiceRecord({type: 'start'})"
            >
              开始录音
            </button>
            <button class="flex-1 bg-red mx-4" id="stopRecord">结束录音</button>
            <button
              class="flex-1 bg-blue"
              onclick="window.BaseApp.getContacts({})"
            >
              播放录音
            </button>
          </div>
        </li>
        <li>
          <textarea
            id="tts"
            placeholder="请输入要播放的文字"
            rows="4"
          ></textarea>
          <button class="w-full bg-blue" id="ttsEvent">TTS</button>
        </li>
        <li>
          <div class="w-full flex">
            <button class="flex-1 bg-blue" id="deviceInfo">设备信息</button>

            <button class="flex-1 bg-blue mx-4" id="deviceSize">
              设备尺寸
            </button>
            <button class="flex-1 bg-blue" id="versionInfo">版本信息</button>
          </div>
        </li>
        <li>
          <a href="tel://13294115972">联系我</a>
        </li>
      </ul>
    </div>
  </body>
  <script>
    var vConsole = new window.VConsole();

    let recording = false;

    WaitForJsBridgeReady().then(async () => {
      setTimeout(async () => {
        const res = await window.BaseApp.deviceSize({});
        console.log(res);
        const { statusBarHeight } = res;
        document.querySelector(
          'ul'
        ).style.paddingTop = `${statusBarHeight.toFixed(0)}px`;
      }, 100);
    });

    const darkModeQuery = window.matchMedia('(prefers-color-scheme: dark)');
    darkModeQuery.addListener(handleDarkModeChange);

    function handleDarkModeChange(e) {
      if (e.matches) {
        // 暗黑模式被激活
        console.log('暗黑模式已激活');
        document.querySelector('body').classList.add('dark');
      } else {
        // 亮色模式被激活
        console.log('亮色模式已激活');
        document.querySelector('body').classList.remove('dark');
      }
    }

    document.querySelector('#vibrate').addEventListener('click', async () => {
      await BaseApp.deviceControl({ type: 'vibrate' });
    });

    document.querySelector('#landscape').addEventListener('click', async () => {
      await BaseApp.deviceControl({ type: 'direction', param: 'landscape' });
    });

    document.querySelector('#portrait').addEventListener('click', async () => {
      await BaseApp.deviceControl({ type: 'direction', param: 'portrait' });
    });

    document
      .querySelector('#wakeLock-enable')
      .addEventListener('click', async () => {
        await BaseApp.deviceControl({ type: 'wakeLock', param: true });
      });

    document
      .querySelector('#wakeLock-disable')
      .addEventListener('click', async () => {
        await BaseApp.deviceControl({ type: 'wakeLock', param: false });
      });

    document
      .querySelector('#pickerPicture')
      .addEventListener('click', async () => {
        const res = await BaseApp.assetsPicker({ type: 'image' });
        const { data } = res;

        const createImage = function (img) {
          const image = document.createElement('img');
          image.src = img;
          image.style.width = '100%';
          return image;
        };
        document.querySelector('#picturePreview').innerHTML = '';
        data.forEach((img) => {
          document
            .querySelector('#picturePreview')
            .appendChild(createImage(img.url));
        });
      });

    document
      .querySelector('#videoPicture')
      .addEventListener('click', async () => {
        const res = await BaseApp.assetsPicker({ type: 'video' });
        const { data } = res;
        const video = document.createElement('video');
        video.style.width = '100%';
        video.src = data[0].url;
        video.controls = true;
        document.querySelector('#picturePreview').innerHTML = '';
        document.querySelector('#picturePreview').appendChild(video);
      });

    document
      .querySelector('#filePicker')
      .addEventListener('click', async () => {
        const res = await BaseApp.filePicker({});
        BaseApp.showToast({ message: '请在控制台查看' });
        console.log(res);
      });

    document
      .querySelector('#stopRecord')
      .addEventListener('click', async () => {
        const res = await BaseApp.voiceRecord({ type: 'stop' });
        const { url } = res;
        await BaseApp.voiceRecord({ type: 'play', url: url });
      });

    document.querySelector('#ttsEvent').addEventListener('click', async () => {
      const text = document.querySelector('#tts').value;
      if (text === '') {
        BaseApp.showToast({ message: '请输入要播放的文字' });
        return;
      }
      await window.BaseApp.tts({ text });
    });

    document
      .querySelector('#deviceInfo')
      .addEventListener('click', async () => {
        const res = await window.BaseApp.deviceInfo({});
        BaseApp.showToast({ message: '请在控制台查看' });
        console.log(res);
      });

    document
      .querySelector('#deviceSize')
      .addEventListener('click', async () => {
        const res = await window.BaseApp.deviceSize({});
        BaseApp.showToast({ message: '请在控制台查看' });
        console.log(res);
      });

    document
      .querySelector('#versionInfo')
      .addEventListener('click', async () => {
        const res = await window.BaseApp.packageInfo({});
        BaseApp.showToast({ message: '请在控制台查看' });
        console.log(res);
      });
  </script>
</html>
